



<!DOCTYPE html>

<html class="transition">

  <head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">

	<meta http-equiv="Content-Language" content="en">
    <meta content="John Graves" name="author">
    <meta content="" name="description">

    <title>HTML5 Presentation</title>


    <link href="css/slideView.css" class="theme" rel="stylesheet" media="screen">
    <script type="text/javascript" src="libs/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="libs/jquery.fullscreen-min.js"></script>

	<script type="text/javascript">
		var presUrl;
		var slideshow;
		var currentPlayer;
		var autoplay=true;
		var muted = false;

		$(document).ready(function() {

			$("html").focus();

			presUrl = window.location.href.match(/^(.*[\\\/])/g);

			slideshow = new SlideShow(queryAll('.slide'));

			document.addEventListener('DOMContentLoaded', function() {
			  query('.slides').style.display = 'block';
			}, false);

			queryAll('#toc-list li a').forEach(function(el) {
			    el.onclick = function() { slideshow.go(el.dataset['hash']); };
			});

			$("nav#helpers , #speaker-note").on('mouseenter',function(){
					$("nav#helpers,.audioplayer").addClass('active');
			    }).on('mouseleave',function(){
			    	$("nav#helpers,.audioplayer").removeClass('active');
			});

			$(".controlBtn").mouseenter(function(){
			    	$(this).addClass('active');
			    }).mouseleave(function(){
			    	$(this).removeClass('active');
			});

			//appening OpenGraph information metatags to header (ogp.me)
			//(mainly for facebook recognition of the permalinks)
			$('head').append(
					'<meta property="og:title" content="SlideSpeech">'+
					'<meta property="og:type" content="article">'+ //most suitable type!
					'<meta property="og:image" content="' + presUrl + 'thumb.jpg">'+
					'<meta property="og:url" content="'+ presUrl +'">'

				);

			//append the sharing tabs.
			$('#shareBarHide').append(
				      '<div id="sharing">'+
   					   	'<a href="https://www.facebook.com/dialog/feed?app_id=321769724583278&link='+ presUrl + '&picture='+ presUrl + 'thumb.jpg' + '&name=SlideSpeech&caption=Got%20something%20important%20to%20say?%20Let%20us%20do%20the%20talking.&description=%20&redirect_uri='+ presUrl +'" target="_blank" alt="Share on facebook."><img src="images/fb.png"></a>'+
   					   	'<a href="https://twitter.com/share?url='+ presUrl + '&via=SlideSpeech" target="_blank" alt="Tweet."><img src="images/tw.png"></a>'+
   					   	'<a href="mailto:?body=Check%20out%20this%20slidespeech%20presentation!%0A%0A'+ presUrl +'&amp;subject=A%20link%20on%20SlideSpeech" alt="Email."><img src="images/em.png"></a>'+
      				  '</div>');

			$('#shareBar').click(function(){
			                   $('#shareBarHide').slideToggle('slow');
			               });

 			$('.close').click(function(){
			                   $('#shareBarHide').slideToggle('slow');
			               });

			//Appending fullscreen button if supported
			if ((typeof document.webkitCancelFullScreen != 'undefined' || typeof document.mozCancelFullScreen != 'undefined') || typeof document.oCancelFullScreen != 'undefined') {
				$('#nav-next').after('<button title="fullscreen" class="controlBtn" id="nav-fs" class="nav-fs"><img src="images/fs.png"></button>');
				$("#nav-fs").click(function(){
					$('body').toggleFullScreen();
				});
			}

			$('#mute').click(function(){
				if (muted == false) {
					mute();
				} else {
					unmute();
				}
			});

			$('.audioplayer audio').bind("ended", function(){
				if(autoplay) {
                    var stopForQuestion = false;
{%- for slide in slideSeq -%}
   {%- if slide.A %}
                    if (currentPlayer.id == "audioplayer_{{ slide.number }}") {
					    stopForQuestion = true
                    }
   {%- endif -%}
{%- endfor %}
                    if (!stopForQuestion) slideshow.next();
                }
			});

			//google analytics
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-33604263-1']);
			_gaq.push(['_trackPageview']);

			(function() {
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();

			//autostart if not embedded
			if(location.search == '?autostart')
				slideshow.playCtrl(1);

		});

		function mute() {
			$('#mute').addClass('muted');
			currentPlayer.pause();
			muted = true;
		};

		function unmute() {
			$('#mute').removeClass('muted');
			currentPlayer.play();
			muted = false;
		};

		function replay(){
			$('.audioplayer audio').bind("ended", function(){
				if(autoplay)
					slideshow.next();
			});
			slideshow.go(1);
		}

{% for slide in slideSeq %}
   {% if slide.A %}
      {% for response in slide.A %}
function slide{{ slide.number }}response{{ response.responseNumber }}()
{
   {% if response.k %}
      window.open('{{ response.k }}', '_blank');
      window.focus();
   {% else %}
       {% if response.m %}
        document.getElementById('audioplayer_{{ slide.number }}r{{ response.responseNumber }}').play();
        slideshow.next();
       {% else %}
        document.getElementById("slide{{ slide.number }}-answer{{ response.responseNumber }}").innerHTML = "<h2>{{ response.a }}</h2>";
        document.getElementById("slide{{ slide.number }}-answer{{ response.responseNumber }}").style.color = "grey";
        document.getElementById('audioplayer_{{ slide.number }}r{{ response.responseNumber }}').play();
       {% endif %}
   {% endif %}
}
      {% endfor %}
   {% endif %}
{% endfor %}
	</script>

  </head>

  <body>

    <nav id="helpers">
      <menu>
     	 <span class="logo">
	     	 <a href="http://slidespeech.com" target="_blank" alt="Slidespeech"><img src="images/logo-slides.png"></a>
     	 </span>
     	 <span class="countInfo" style="width:90px;display:inline-block;margin-top: 7px;vertical-align: top;">
	     	 <span id="slide-no">1</span>
	     	 <span style="opacity: 0.7;"> / </span>
	     	 <span id="slide-len" style="opacity: 0.7;">{{ slideCount }}</span>
     	 </span>

     	 <button title="rwd" class="controlBtn" id="nav-prev" class="nav-prev"><img src="images/rwd.png"></button>
     	 <button data-command="play" title="play" class="controlBtn"><img src="images/play_pause.png"></button>
     	 <button title="fwd" class="controlBtn" id="nav-next" class="nav-next"><img src="images/fwd.png"></button>
	     <button title="mute" class="controlBtn" id="mute"><img src="images/mute.png"></button>

      </menu>
    </nav>
    <div class="presentation">

      <div id="presentation-counter">1</div>
      <div id="slideContainer" class="slides" style="display: block; ">

		{% for slide in slideSeq %}
				<div class="slide" id="slide{{ slide.number }}-slide">
                {% if slide.A %}
                  <center>
                  <table CELLPADDING="48"><tr><td>
                     <h2>{{ slide.q }}</h2>
                   {% for answer in slide.A %}
                     <div id="slide{{ slide.number }}-answer{{ answer.responseNumber }}">
                       <h2><a href="javascript:slide{{ slide.number }}response{{ answer.responseNumber }}()" >{{ answer.a }}</a></h2>
                     </div>
                   {% endfor %}
                  </td></tr></table>
                  </center>
                {% else %}
						<section>
							<img src="slide-{{ slide.n }}.png" id="left-init-key">
						</section>
                {% endif %}
						<aside class="note">
							<section>
								<div class="audioplayer">
									<div class="ap_elements">
										<audio id="audioplayer_{{ slide.number }}" controls>
                                        {% if slide.A %}
											<source src="Slide{{ slide.questionNumber }}.mp3" type="audio/mpeg"/>
											<source src="Slide{{ slide.questionNumber }}.ogg" type="audio/ogg"/>
                                        {% else %}
											<source src="Slide{{ slide.n }}.mp3" type="audio/mpeg"/>
											<source src="Slide{{ slide.n }}.ogg" type="audio/ogg"/>
                                        {% endif %}
											Your browser does not support the <code>audio</code> element.
										</audio>
                                        {% if slide.A %}
	                                    	{% for response in slide.A %}
										<audio id="audioplayer_{{ slide.number }}r{{ response.responseNumber }}" controls>
											<source src="Slide{{ slide.questionNumber }}r{{ response.responseNumber }}.mp3" type="audio/mpeg"/>
											<source src="Slide{{ slide.questionNumber }}r{{ response.responseNumber }}.ogg" type="audio/ogg"/>
										</audio>
                                            {% endfor %}
                                        {% endif %}
									</div>
									<div class="ap_elements">
                                        {% if slide.A %}
										<input type="checkbox" id="autoplay" checked="unchecked"/>
                                        {% else %}
										<input type="checkbox" id="autoplay" checked="checked"/>
                                        {% endif %}
										<span class="ap_label">autoplay</span>
									</div>
								</div>
							</section>
							</aside>
				        <span class="counter"></span>
					</div>
		{% endfor %}




      </div> <!-- slides -->

      <div id="speaker-note" class="invisible" style="display: none;">
      </div><!-- speaker note: container for including the individual speakernotes
				 TODO: copy from speakernotes section while playing the presentation -->

      <aside id="help" class="sidebar invisible" style="display: hidden;">
        <table>
          <caption>Help</caption>
          <tbody>
            <tr>
              <th>Move Around</th>
              <td>←&nbsp;→</td>
            </tr>
            <tr>
              <th>Help</th>
              <td>0</td>
            </tr>
          </tbody>
        </table>
      </aside>
    </div> <!-- presentation -->
    <div id="shareBar"><img src="images/sharing.png"></div>
    <div id="shareBarHide"><a class="close" href="#">×</a></div>

 	<script src="js/slideshow.js"></script>

  </body>
</html>

